<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login with Captcha</title>
</head>
<body>
    <h2>Login with Captcha</h2>
    <form>
        <input type="text" name="username" placeholder="Username" required><br>
        <input type="password" name="password" placeholder="Password" required><br>
        <img src="http://127.0.0.1:5000/auth/captcha" alt="Captcha"><br>  <!-- 显示验证码图片 -->
        <input type="text" name="captcha" placeholder="Enter Captcha" required><br>
        <button type="submit" id="login">Login</button>
    </form>
</body>
<script src="https://code.bdstatic.com/npm/jquery@2.2.3/dist/jquery.min.js"></script>
<script>

    $('#login').click(function() {
        var formData = {
            username: $('input[name="username"]').val(),
            password: $('input[name="password"]').val(),
            captcha: $('input[name="captcha"]').val()
        };

        $.ajax({
            url: 'http://127.0.0.1:5000/auth/login2', // 你的服务器端处理URL
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(response) {
                console.log('Success:', response);
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });
</script>
</html>